<!-- Copyright (c) 2014 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<polymer-element name="cr-button" extends="button" on-keypress="{{ handleKeypress }}">
    <template><style>
            :host {
                -webkit-user-select: none;
                background-color: #f5f5f5;
                background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1);
                border-radius: 2px;
                border: 1px solid #dcdcdc;
                color: #444;
                font-weight: bold;
                height: 30px;
                margin: 0;
                padding: 0 16px;
                text-align: center;
                vertical-align: middle;
                white-space: nowrap;
            }

            :host([icon]) {
                padding: 0 4px;
            }

            :host(:active),
            :host(:hover) {
                border-color: #c6c6c6;
                color: #222;
                box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
                background-color: #f8f8f8;
                background-image: linear-gradient(to bottom, #f8f8f8, #f1f1f1);

            }

            :host(:active) {
                box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
            }

            :host(:focus) {
                border: 1px solid #4d90fe;
                outline: none;
            }

            :host([primary]) {
                background-color: #4d90fe;
                background-image: linear-gradient(to bottom, #4d90fe, #4787ed);
                border: 1px solid #3079ed;
                color: #fff;
            }

            :host([create]) {
                background-color: #d14836;
                background-image: linear-gradient(to bottom, #dd4b39, #d14836);
                text-shadow: 0 1px rgba(0,0,0,0.1);
                border: 1px solid transparent;
                color: white;
                text-transform: uppercase;
            }

            :host([primary]:hover) {
                background-color: #357ae8;
                background-image: linear-gradient(to bottom, #4d90fe, #357ae8);
                border: 1px solid #2f5bb7;
            }

            :host([create]:hover) {
                background-color: #c53727;
                background-image: linear-gradient(to bottom,#dd4b39,#c53727);
                border: 1px solid #b0281a;
            }

            :host([create]:focus),
            :host([primary]:focus) {
                box-shadow: inset 0 0 0 1px #fff;
                border: 1px solid transparent;
                outline: none;
            }

            :host([primary]:active) {
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
                background-color: #357ae8;
                border: 1px solid #2f5bb7;
            }

            :host([create]:active) {
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
                background-color: #b0281a;
                background-image: linear-gradient(to bottom, #dd4b39, #b0281a);
                border: 1px solid #992a1b;
            }
        </style><content></content></template>
    <script>
        Polymer({
            handleKeypress: function(event) {
                // Allow space or enter to activate.
                if (event.keyCode == 32)
                    this.fire("tap");
                else if (event.keyCode == 13)
                    this.fire("tap");
            },
        });
    </script>
</ploymer-element>
